<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .d {
            width: 500px;
            height: 300px;
            border: 1px solid #000;
            background: pink;
        }
        
        .d button {
            float: right;
        }
    </style>
</head>

<body>
    <div class="d"><button id="button">x</button> 我是广告</div>
    <h1>我是主页</h1>
    <!--   1实现一个用户名和密码注册 跳转到另一个页面显示 -->
    用户名：<input type="text" id="yongh" /> 密 码：<input type="password" id="pass" />
    <button id="button">登录</button>

    <script>
        var yong = document.getElementById("yongh");
        var passw = document.getElementById("pass");
        var btn = document.getElementById("button");
        btn.onclick = function() {
            var yongh = yong.value;
            var pass = passw.value;
            if (yongh == "abszzl" && pass == "abs123") {
                window.location.href =
                    "file:///C:/Users/Administrator/Desktop/%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5JS/%E8%AF%BE%E5%A0%82%E7%BB%83%E4%B9%A0/abs.html";
            } else {
                alert("你输入的账户有误，请重新输入！");
            }
        };

        // 2,完善流氓广告 关了之后过一段时间还有显示  --> -->

        var btn = document.getElementById("button");
        btn.onclick = function() {
            d.style.display = "none";
            setTimeout(function() {
                d.style.display = "block";
            }, 2000);
        };
    </script>
</body>

</html>